<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态出图</title>
    <script src="../../dist/openlayers/include-openlayers.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;"> 
    <div id="map" style="width: 100%;height:100%"></div>
    <script>
        // 创建地图
        let image_layer;
        let map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [55.23, 25.08], // 中心点
                zoom: 8, // 缩放级别
                projection: "EPSG:4326"
            }),
            controls: ol.control.defaults({
                attributionOptions: {
                    collapsed: true
                }
            }),
            layers: [
                // 创建一个使用Open Street Map地图源的瓦片图层
                new ol.layer.Tile({ source: new ol.source.OSM() })
            ],
        });
        //动态出图
        let userid = "10001";
        let username = "softCOM";
        let image_source = new ol.source.ImageSuperMapRest({
            layersID: 'fff60a0bdab04316a2f7b757971bc0a3_e5ca86ed8ad442ee8ab144160b604aa6',
            url: 'http://localhost:8090/iserver/services/map-Dubai/rest/maps/Dubai',
            prjCoordSys: { 'epsgCode': 4326 },
            transparent: true,
            tileLoadFunction: function (tile, src) {
                var xhr = new XMLHttpRequest();
                xhr.responseType = 'blob';
                xhr.addEventListener('loadend', function (evt) {
                    var data = this.response;
                    if (data !== undefined) {
                        tile.getImage().src = URL.createObjectURL(data);
                    } else {
                        tile.setState('error');
                    }
                });
                xhr.addEventListener('error', function () {
                    tile.setState('error');
                });
                xhr.open('GET', src);
                xhr.setRequestHeader('Accept', '*/*');
                xhr.setRequestHeader('X-HW-ID', userid);
                xhr.setRequestHeader('X-HW-APPKEY', username);
                xhr.send();
            }
        });

        image_layer && map.removeLayer(image_layer);
        image_layer = new ol.layer.Tile({
            opacity: 0.7,
            source: image_source
        });
        map.addLayer(image_layer);
    </script>
</body>

</html>